
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title></title>
    <script type="text/javascript">
			window.onload = function(){
			size=document.body.clientWidth/30;
			document.getElementsByTagName("html")[0].style.fontSize = size+"px";
			
			var canvas = document.getElementById("canvas");
			canvas.width = document.body.clientWidth;
			canvas.height = document.body.clientHeight;
			
			var snow_x = new Array();
			var snow_y = new Array();
			var fontSizes = new Array();
			for(var i = 0 ; i < 100 ; i++){
				snow_x[i] = Math.random()*canvas.width;
				snow_y[i] = -1*Math.random()*canvas.height;
				fontSizes[i] = Math.random()*30+2;
			}
			
			//获取context2d
			var context = canvas.getContext("2d");
			context.fillStyle = "#FFFFFF";
			//setInterval可以定时执行操作
			var speedy = 10;
			var speedx = 5;
			setInterval(function(){
				context.clearRect(0,0,canvas.width,canvas.height);
				for(var i = 0 ; i < 100 ; i++){
					snow_y[i] = snow_y[i] + speedy ;
					if(snow_y[i]>canvas.height){
						snow_y[i] = -1*Math.random()*canvas.height;
					} 
					context.font = fontSizes[i]+"px arial";
					context.fillText("#*",snow_x[i],snow_y[i]);
				}
			},50);
			
			//添加事件
			var dl = document.getElementById("denglong");
			
			var player = document.getElementById("player");
			dl.addEventListener("touchstart",function(){
				if(player.paused){
					player.play();
				}else{
					player.pause();
				}
			},false);
    	}
    </script>

	<style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	}
    	html,body{
    		height: 100%;
    		width: 100%;
    	}
    	.p-1{
    		background:url(img/人.jpg);
    		width:100%;
    		height: 78%;
    		background-size: contain;
    		
    		}

    		#hua{ 
    		    background: url(img/ai.jpg);
    			width: 20rem;
    			height: 5.121137206427689rem;
    			position: absolute;
    			background-size: contain;
    			top: 24rem;
    			left: 10rem;
    			background-repeat: no-repeat;
    		
    		}
    		.z1{
    			background: url(img/xin.jpg);
    			width: 2.75rem;
    			height:2.139678615574784rem ;
    			position: absolute;
    			background-size: contain;
    			left: 0rem;
    			top:10rem;
    			background-repeat: no-repeat;
    			animation: m1 2s linear infinite;
    			-webkit-animation: m1 2s linear infinite;
    			}
    			@-webkit-keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes m1{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z2{
    				background: url(img/hun.jpg);
    				width: 3.515822784810127rem;
    				height:3.101359703337454rem;
    				position: absolute;
    				background-size: contain;
    				left: 2rem;
    				top: 12rem;
    				background-repeat: no-repeat;
    				animation: m2 2s linear infinite;
    			-webkit-animation: m2 2s linear infinite;
    				
    			}
    			@-webkit-keyframes m2{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			@keyframes m2{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z3{
    				background: url(img/kuaii.jpg);
    				width: 2.120253164556962rem;
    				height: 2.891223733003708rem;
    				position: absolute;
    				background-size: contain;
    				left: 1rem;
    				top: 15.5rem;
    				background-repeat: no-repeat;
    				animation: m3 2s linear infinite;
    			-webkit-animation: m3 2s linear infinite;
    			}
    			@-webkit-keyframes m3{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m3{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z4{
    				background: url(img/le.jpg);
    				width: 3.417721518987342rem;
    				height:3.017305315203956rem;
    				position: absolute;
    				background-size: contain;
    				left:0rem;
    				top: 18rem;
    				background-repeat: no-repeat;
    				animation: m4 2s linear infinite;
    			-webkit-animation: m4 2s linear infinite;
    				}
    				@-webkit-keyframes m4{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes m4{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.z5{
    				background: url(img/wang，.jpg);
    				width: 5.531645569620253rem;
    				height:3.07540173053152rem;
    				position: absolute;
    				background-size: contain;
    				left: 2rem;
    				top: 2rem;
    				background-repeat: no-repeat;
    				
    				}
    				.z6{
    					background: url(img/倩.jpg);
    				width: 5.575949367088608rem;
    				height:3.470951792336218rem;
    				position: absolute;
    				background-size: contain;
    				left: 8rem;
    				top:0rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z7{
    				background: url(img/xu.jpg);
    				width: 3.455696202531646rem;
    				height:3.07540173053152rem;
    				position: absolute;
    				background-size: contain;
    				left: 18rem;
    				top: 0rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z8{
    					background:url(img/yu.jpg);
    					width: 3.25rem;
    				height:6.8776266996291718rem;
    				position: absolute;
    				background-size: contain;
    				left: 22rem;
    				top: 2rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z9{
    					background: url(img/long.jpg);
    					width: 3rem;
    				height:4rem;
    				position: absolute;
    				background-size: contain;
    				left: 26rem;
    				top: 3rem;
    				background-repeat: no-repeat;
    					
    				}
    				.z10{
    					background:url(img/缘.jpg);
    					width: 3.00632911392405rem;
    				height:15.6761433868974rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 0;
    				top: 17rem;
    				left: 14rem;
    				
    				margin: auto;
    				background-repeat: no-repeat;
    				}
    				/*.z11{
    					background: url(img/psd2464_0010_图层-48.png);
    					width: 0.9018987341772152rem;
    				height:6.650185414091471rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 9rem;
    				left: 2.5rem;
    				background-repeat: no-repeat;
    				}
    				.z12{
    					background: url(img/psd2464_0000_图层-8-副本-5.png);
    					width: 2.484177215189873rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 9rem;
    				left: 4rem;
    				background-repeat: no-repeat;
    				animation: x 2s linear infinite;
    				}
    				@keyframes x{
    					from{transform: translate(10px,10px);}
    					to{transform: translate(-10px,-10px);}
    				}
    				.z13{
    					background: url(img/psd2464_0001_-.png);
    					width: 2.515822784810127rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 15rem;
    				left: 6rem;
    				background-repeat: no-repeat;
    				animation: x1 2s linear infinite;
    				}
    				@keyframes x1{
    					from{transform: translate(-10px,-10px);}
    					to{transform: translate(10px,10px);}
    				}
    				.z14{
    					background: url(img/psd2464_0002_-.png);
    					width:2.689873417721519rem;
    				height:2.027194066749073rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 15rem;
    				right: 6rem;
    				background-repeat: no-repeat;
    				animation: x6 2s linear infinite;
    				animation: x7 2 linear infinite;
    				
    				
    				}
    				@keyframes x6{
    					from{transform: rotate(0deg);}
    					to{transform: rotate(360deg);}
    				}
    				@keyframes x7{
    					from{transform:translate(50px,10px)}
    					to{transform:translate();}
    				}
    				
    				
    				
    				.z16{
    					background: url(img/psd2464_0001_-.png);
    					width: 2.515822784810127rem;
    				height:1.38442521631644rem;
    				position: absolute;
    				background-size: contain;
    				bottom: 12rem;
    				right: 6rem;
    				background-repeat: no-repeat;
    				animation:x3 2s linear infinite;
    				}
    				@keyframes x3{
    					from{transform: translate();}
    					to{transform: translate(-100px,-10px);}
    				}
    				.p-2{
    					background:url(img/psd2464_0006_图层-54.png),url(img/psd2464_0004_1.png);url(img/psd2464_0006_图层-1-副本.png);
    					background-size: contain;
    					height: 100%;
    					width: 100%;
    					animation: pa2 3s;
    					}

					@keyframes pa2{
						from{
						margin-left: 30rem;
					}
					to{
					margin-left: 0rem;
						}	
					}
    				
    				    #v {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							z-index: 5;
							display: none;
							margin: auto;}
						.p-3{
								background:url(img/psd2464_0006_图层-1-副本.png);
								background-size: contain;
    							height: 100%;
    							width: 100%;
							}#v2{
								background: url(img/psd2464_0003_素材CNN-sccnn.com.png);
								width:20.78739184177998rem;
    							height:60rem;
    							position: absolute;
    							background-size: contain;
    							top:0;
    							right:-15rem;
    					
    							background-repeat: no-repeat;
							}
    				   
							#v1{
								background: url(img/psd2464_0001_素材CNN-sccnn.com.png);
								width:15.82200247218789rem;
    							height:10.7753164556962rem;
    							position: absolute;
    							background-size: contain;
    							top: 0;
    							right:1rem;
    							;margin: auto;
    							background-repeat: no-repeat;
							}
							#v4{
								background: url(img/psd2464_0002_img.png);
								width:30.78739184177998rem;
    							height:20.70569620253165rem;
    							position: absolute;
    							background-size: contain;
    							top: 10rem;
    							right:-5rem;
    					
    							background-repeat: no-repeat;
							}
								#v5{
									position: absolute;
									background: url(img/psd2464_0006_素材CNN-sccnn.com.png);
									width:13.33333333333333rem;
    							height:7.927215189873418rem;
    							position: absolute;
    							background-size: contain;
    							bottom:10rem;
    							left:3rem;
    					
    							background-repeat: no-repeat;
    							animation: pp 2s linear infinite;
    							-webkit-animation:pp 2s linear infinite;
								}
								@-webkit-keyframes pp{
    				0%{
    					transform: scale(0.5);
    				}
    				50%{
    					transform: scale(1);
    				}
    				100%{
    					transform: scale(0.5);
    				}
    			}
    			@keyframes pp{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(0.5);
    				}
    				100%{
    					transform: scale(1);
    				}
    			}
    			.v6{
    				font-family: "隶书";
					font-size: 2.5rem;
					color: black;
					position: absolute;
					top:43rem;
					
    			}
    			#v7{
    				background: url(img/c3.png);
    				width:12.61860751694393rem;
    					height:8.10126582278481rem;
    					position: absolute;
    					background-size: contain;
    					right:2rem;
						top:43rem;
    					background-repeat: no-repeat;
    					animation: xx 3s linear infinite;
    			}
    			@keyframes xx{
    				from{transform: translate(10px,10px);}
    				    	to{transform: translate();}
    			}
					.z17{
						background:url(img/long.jpg);
						width:3rem;
    					height:3rem;
    					top: 2rem;
    					right: 2rem;
    					margin: auto;
    					background-repeat: no-repeat;
    					position: absolute;
    					background-size: contain;
						
					}			
							*/
							
    	  </style>
</head>
<body ><a href="s.html">
	
	<div id="p-1" class="p-1">
		<canvas id="zuo" class="zuo"></canvas>
		<audio id="player" class="player" src="static/吴樾、安又琪 - 小两口.mp3" autoplay="autoplay" loop="loop"></audio>
	<div id="hua"></div>
	<div class="z1" id="z1"></div>
	<div id="z2" class="z2"></div>
	<div class="z3"></div>
	<div class="z4"></div>
	<div class="z5"></div>
	<div class="z6"></div>
	<div class="z7"></div>
	<div class="z8"></div>
	<div class="z9"></div>
	<div class="z10" id="z10"></div>
	<div class="z11"></div>
	<div class="z12"></div>
	<div class="z13"></div>
	<div class="z14"></div>
	<div class="z15"></div>
	<div class="z16"></div>
	<div id="z17" class="z17"></div>
	</div>
	</a>
</body>
</html>